<template>
    <div class="selectNomber" :style="{ height: evieHeight}">
        <div class="search_box">
            <div class="searchLeft">
                <span class="icons iconfont iconsousuo"></span>
                <input type="text" class="searchInput" placeholder="请输入机架编号" v-model="searchNo" @change="">
            </div>
            <span class="searchButton" @click="linkSearch">搜索</span>
        </div>
        <!-- 暂无搜索结果 -->
        <div class="noContnet" v-if="isNoDatas">
            <noContent></noContent>
        </div>
        <!-- 列表组件 -->
        <div class="list_box" v-if="showList.length > 0">
			<label class="checkbox" v-for="(item, index) in showList" :key="item.id" @click="choseData(item.id)">
				<div class="list">
					<p class="name">{{item.number}}</p>
					<p class="number">{{item.machine}}</p>
					<p class="choseSta">
						<span class="iconfont icondanxuankuang" v-if="!item.checked"></span>
						<span class="iconfont iconxuanzhong" v-if="item.checked"></span>
					</p>  
				</div>
			</label>

			<!-- <checkbox-group @change="checkboxChange">
				<label class="checkbox" v-for="(item, index) in showList" :key="item.id">
					<div class="list">
						<p class="name">{{item.number}}</p>
						<p class="number">{{item.machine}}</p>
						<p class="choseSta">
							<checkbox  :value="item.number" :checked="item.checked" v-show=" 1 != 1"/>
							<span class="iconfont icondanxuankuang" v-if="!item.checked"></span>
							<span class="iconfont iconxuanzhong" v-if="item.checked"></span>
						</p>  
					</div>
				</label>
			</checkbox-group> -->
		</div>

        <div class="loadMore" v-if="showMore" @click="loadMoreList">点击加载更多...</div>
        <!-- padding-bottom不生效，此为占位标签 -->
        <div class="placeholder"></div> 
        
        <div class="choseShow">
            <div class="box">
                <p class="chosedAll" @click="checkAllFn">
                    <span class="iconfont icondanxuankuang" v-if="!isCheckAll"></span>
                    <span class="iconfont iconxuanzhong" v-else></span>
                    <span class="choseAllText">全选</span>
                </p>
                <p class="chosedNumber">
                    已选中：{{choseList.length}}
                </p>
                <p class="confirm" @click="submitChose">
                    <span class="text">确定</span>
                </p>
            </div>
            
        </div>
    </div>
</template>

<script>
import store from "../../store";
import noContent from "../../components/noContent"
export default {
    components:{
        noContent
    },
    data(){
        return{
            evieHeight:"",
            chosed:10,//选择条数
            isCheckAll:false,//是否选择全部
            searchNo:"",//搜索录入机架编号
            pagesize:50,//页码条数
            pageIndex:0,//当前页
            showList:[],//渲染到页面的数组数据
            getList:[],//传递到当前页数据
            choseList:[],//已选择的数组
            isNoDatas:false,//是否没有数据
            showMore:false,//是否显示加载更多
            noMoreData:false,//是否没有更多数据
        }
    },
    onLoad(){
        
    },
    mounted(){
        this.isCheckAll = false;
		this.getList = store.state.jijList;
        this.choseList = store.state.jijNo;
		this.evieHeight = (wx.getSystemInfoSync().windowHeight) + "px";
		this.getList.forEach(item => {
			this.$set(item,"checked",false);
        });
        this.initeList();
		
    },
    methods:{
        initeList(){
            this.pageIndex = 1;
            let getChosedPageNumber = store.state.choseJiJPageIndex;
            if(getChosedPageNumber > 1){
                for (var i;i < getChosedPageNumber ; i++){
                    this.upToLoadList();
                }
            }else{
                 this.showList = this.pagination(this.pageIndex,this.pagesize,this.getList);
            }
            let chosedNos = store.state.jijNo;
            for (const key in this.showList) {
                for (const i in chosedNos) {
                    if(this.showList[key].id == chosedNos[i]){
                        this.showList[key].checked = true;
                    }
                }
            }
        },
        check(){//全选
            this.isCheckAll = !this.isCheckAll;
        },
        pagination(pageNo, pageSize, array) {//数组分页
            var offset = (pageNo - 1) * pageSize;
            return (offset + pageSize >= array.length) ? array.slice(offset, array.length) : array.slice(offset, offset + pageSize);
        },
        loadMoreList(){
            wx.showLoading({
                "title":"加载中..."
            });
			this.showMore = false;
			this.isCheckAll = false;
            this.upToLoadList();
        },
        upToLoadList(){//上拉加载处理
            this.pageIndex++;
            this.LoadMoreDo();
        },
        LoadMoreDo(){
            let oldListShow = JSON.parse(JSON.stringify(this.showList));
            let newListShow = this.pagination(this.pageIndex,this.pagesize,JSON.parse(JSON.stringify(this.getList)));
            if(newListShow.length > 0){
                newListShow = [...oldListShow,...newListShow];
               //wx.hideLoading()
                this.showList = newListShow;
                this.noMoreData = false;
            }else{
                this.noMoreData = true;
                wx.showToast({
                    title:"到底啦",
                    image:"/static/img/icon/noContnet.png",
                });
                this.pageIndex--;
            }
            this.showMore = false;
            store.commit("udpataJiJPageIndex",this.pageIndex);
    },
        linkSearch(){
            var list = this.getList;
            var array = [];
            for(var i in list){
                if(list[i].number.indexOf(this.searchNo) >= 0){
                    array.push(list[i]);
                }
            };
            this.showList = array;        
            if(this.searchNo && this.searchNo != ""){
                this.getList = array;
                this.initeList();
            }else{
                this.getList = store.state.jijList;
                this.initeList();
            }
        },
        choseData(id){//单个选择
			if(this.choseList.indexOf(id) < 0){
				this.choseList.push(id);
			}else{
				let a = this.choseList.indexOf(id);
                this.choseList.splice(a, 1);
                this.isCheckAll = false;
            }
            if(this.choseList.length == this.showList.length){
                this.isCheckAll = true;
            }

			for(var i in this.showList){
				if(this.showList[i].id == id){
					this.showList[i].checked = !this.showList[i].checked;
				}
			}
		},
		checkAllFn(){//全选/取消全选
			this.isCheckAll = !this.isCheckAll;
            if(this.isCheckAll){
                this.choseList = [];
                for(var i in this.showList){
                    this.showList[i].checked = true; 
                    this.choseList.push(this.showList[i].id);
                }
            }else{
                this.choseList = [];
                for(var i in this.showList){
                    this.showList[i].checked = false;
                }
            }
		},
         checkboxChange(e) {//checkbox-group
			console.log(e);
        },
        submitChose(){
            store.commit("updateCheckNo",this.choseList);
            this.linkToIdnex();
        },
        linkToIdnex(){
            // wx.redirectTo({
            //     url:"../../pages/AccordingUser/main",
            // });
            wx.navigateBack({
                data:1
            });
        }
    },
    watch:{
        searchNo(val,oldval){
            this.linkSearch();
            this.noMoreData = false;
        
            if(this.showList.length<1){
                this.showMore = false;
                this.isNoDatas = true;
            }else{
                this.isNoDatas = false;
            }
		},
    },
    onReachBottom(){
        if(this.noMoreData){
            this.showMore = false;
        }else{
            this.showMore = true;
        }
    },
    onPullDownRefresh(){
        this.pageIndex = 0;
        this.initeList();
    },
    destroyed() {
        store.state.jijList = [];
    },
    
}
</script>

<style scoped>
.selectNomber{
    width: 100%;
    height: 100%;
    font-size: 28rpx;
    padding-bottom:176rpx;
    background-color: white;
}
.search_box{
    display: flex;
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
	position: fixed;
	top: 0;
    background-color: #FAFAFA;
}

/* 循环列表处 */
.list_box{
	margin-top: 88rpx;
    background-color: white;
}
.searchLeft{
    width: 80%;
    height: 60rpx;
    display: flex;
    margin-left: 30rpx;
    border-radius: 30px;
    margin-top:15rpx;
    background-color: #f7f5f5;
}
.icons{
    color: #999999;
    font-size: 36rpx;
    width: 10%;
    line-height:29px;
    text-align:center;  

}
.searchInput{
    width: 90%;
	height: 50rpx;
	line-height: 50rpx;
    font-size: 28rpx;
	margin-top: 5rpx;
}
.searchButton{
    width: 15%;
    text-align: center;
    margin-right: 30rpx;
    height: 60rpx;
    line-height: 60rpx;
    color: #333333;
    font-size: 28rpx;
    margin-top:15rpx;
}

/*加载更多提醒*/
.loadMore{
    font-size: 28rpx;
    color: #999;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background-color: white;
}
.placeholder{
    width:100%;
    height: 88rpx;
    line-height: 88rpx;
}

/*底部操作*/
.choseShow{
    width: 100%;
    height: 88rpx;
    font-size: 28rpx;
    line-height: 88rpx;
    position:fixed;
    bottom:0;
    border:1px #F5F5F5 solid; 
    background-color:white;
    border-top:1px #F5F5F5 solid;
}
.choseShow .box{
    display: flex;
    width: 92%;
    margin: 0 30rpx;
}
.box p{
    flex: 1;
}
.chosedAll{
    position: relative;
}
.choseAllText{
    height: 64rpx;
    line-height: 64rpx;
    display: inline-block;
    margin-left:64rpx;
}
.chosedAll .iconfont{
    top:12rpx;
    height: 64rpx;
    line-height: 64rpx;
    font-size: 52rpx;
    display: inline-block;
    position:absolute;
}
.chosedNumber{
    text-align: center;
}
.confirm{
    text-align: right;
}
.confirm .text{
    width: 50%;
    color: white;
    height: 64rpx;
    border-radius: 10rpx;
    line-height: 64rpx;
    text-align: center;
    display: inline-block;
    background-color: #20C9E1FF;
}
.confirm .text:active{
    background-color: #11b3ca;
}


.list{
    width: 92%;
    display: flex;
    height: 90rpx;
    line-height: 90rpx;
    margin: 0 30rpx;
    background-color: white;
    border-bottom: 1px #DADADAFF solid;
}
.list p{
    flex: 1;
    color: #333333FF;
    font-size: 28rpx;
}

.number{
    text-align: center;
}
.choseSta{
    text-align: right;
}
.choseSta span{
    font-size: 52rpx;
}

</style>

